<template>
  <div id="app" @touchstart="gotouchstart" @touchmove="gotouchmove">
    <router-view>

    </router-view>
  </div>
</template>

<script>
    import {Toast} from 'vant';

    let _this;
    let timeOutEvent = 0; // 定时器
    export default {
        name: 'app',
        beforeCreate() {
            _this = this;
        },
        watch: {
            $route(to, from) { //监控路由发生变化，触发事件to为进入页面，from为离开页面
                this.$nextTick(() => {
                    setTimeout(() => {
                        _this.checkUpdate(false);
                    }, 1000);
                });
            }
        },
        mounted() {

        },
        methods: {
            gotouchstart() {
                let that = this;
                clearTimeout(timeOutEvent); // 清除定时器
                timeOutEvent = 0;
                timeOutEvent = setTimeout(function () {
                    // 执行长按要执行的内容，
                    if (window.plus) {
                        // 震动
                        //plus.device.vibrate(1000);;
                    } else {
                        document.addEventListener("plusready", plusReady, false);
                    }
                }, 600); // 这里设置定时
            },
            // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
            gotouchmove() {
                clearTimeout(timeOutEvent); // 清除定时器
                timeOutEvent = 0;
            },
            /**
             * 检查更新
             * @param {热更新是否提示更新对话框} tipsFlag
             */
            checkUpdate(tipsFlag) {
                let $this = this;
                if (window.plus) {
                    // 获取本地应用资源版本号
                    plus.runtime.getProperty(plus.runtime.appid, function (inf) {
                        // 检测更新url
                        var checkUpdateUrl = "https://download-special-pur.gitee.io/eglobal/update.json";
                        // 下载热更新文件
                        var hotUpdateFileUrl = "https://download-special-pur.gitee.io/eglobal/H573BA38A.wgt";
                        // 本地版本号（已安装版本号）
                        var localVer = inf.version;
                        //			plus.nativeUI.showWaiting("检测更新...");
                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function () {
                            switch (xhr.readyState) {
                                case 4:
                                    plus.nativeUI.closeWaiting();
                                    if (xhr.status == 200) {
                                        var resp = JSON.parse(xhr.responseText);
                                        var u = navigator.userAgent,
                                            app = navigator.appVersion;
                                        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
                                        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                                        if (isAndroid) {
                                            var device = resp.android;
                                        }
                                        if (isiOS) {
                                            var device = resp.ios;
                                        }
                                        // 如果可更新
                                        if (device.canUpdate) {
                                            var remoteVer = device.ver;
                                            if (localVer && remoteVer) {
                                                // 先判断版本号，要不要更新
                                                var lvs = localVer.split('.');
                                                var rvs = remoteVer.split('.');
                                                for (var i = 0; i < lvs.length; i++) {
                                                    // 如果本地版本号有一截比服务器的小，就停止比较
                                                    if (Number(lvs[i]) < Number(rvs[i])) break;
                                                }
                                                // 如果i比lvs长度小，证明本地版本号有比服务器小的部分，提前停止了比较，就需要执行更新操作
                                                if (i < lvs.length) {
                                                    if (device.isHotUpdate) { // 热更新
                                                        if (tipsFlag) { // 如果要提示更新，就显示确定对话框
                                                            alert('发现重要版本更新，为确保账户安全，请及时更新')
                                                        }
                                                        plus.nativeUI.showWaiting('下载热更新文件...');
                                                        plus.downloader.createDownload(hotUpdateFileUrl, {
                                                            filename: "_doc/update/"
                                                        }, function (d, status) {
                                                            if (status == 200) {
                                                                var path = d.filename;
                                                                // 更新应用资源
                                                                plus.nativeUI.showWaiting('安装热更新文件...');
                                                                plus.runtime.install(path, {}, function () {
                                                                    plus.nativeUI.closeWaiting();
                                                                    plus.runtime.restart();
                                                                    plus.runtime.restart();
                                                                }, function (e) {
                                                                    plus.nativeUI.closeWaiting();
                                                                    plus.nativeUI.alert('安装热更新文件失败' + "[" + e.code + "]：" + e.message);
                                                                });
                                                            } else {
                                                                plus.nativeUI.alert('下载热更新文件失败');
                                                            }
                                                            plus.nativeUI.closeWaiting();
                                                        }).start();
                                                    } else { // 如果是冷更新，跳转到下载页下载安装
                                                        $this.toColdUpdate(device.coldUpdateUrl)
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    break;
                                default:
                                    break;
                            }
                        }
                        xhr.open('GET', checkUpdateUrl);
                        xhr.send();
                    });
                }
            }
        }
    }
</script>

<style lang="less">
  input[type='file'] {
    outline: none;
    margin-top: 20px;
  }

  #clip_button {
    position: absolute;
    right: 10%;
    bottom: 20px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 2px;
    background: #1AAD19;
    color: #fff;
  }

  #cancel_clip {
    position: absolute;
    left: 10%;
    bottom: 20px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 2px;
    color: #fff;
    background: #E64340;
  }

  #clip_container.container {
    z-index: 99;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
  }

  #clip_container.container > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #clip_image {
    max-width: 100%;
  }

  .cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .crop_loading,
  .crop_success {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
  }

  .crop_loading .crop_content {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #000;
    opacity: 0.9;
    height: 100px;
    width: 100px;
    vertical-align: middle;
    color: #fff;
    padding-top: 20px;
    font-size: 16px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .crop_loading .crop_content img {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .crop_success .crop_success_text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #000;
    opacity: 0.9;
    width: 120px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    font-size: 16px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  .cropper-modal {
    opacity: .5;
    background-color: #000;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {
    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {
    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('');
  }

  .cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }
</style>
